<template>
<div class="all-user">
    <div class="user-table">
        <!-- 用户信息表格 -->
        <table>
            <tr>
                <th>ID</th>
                <th>最新登录(注册)时间</th>
                <th>用户名</th>
                <th>密码</th>
                <th>邮箱</th>
                <th>是否超级会员</th>
                <th>充值总额度</th>
            </tr>
            <tr v-for="item in allUserList" :key="item.ID">
                <td>{{ item.ID }}</td>
                <td>{{ item.newLoginTime | timeTurn }}</td>
                <td>{{ item.username }}</td>
                <td>{{ item.password | pwdTurnMd }}</td>
                <td>{{ item.email }}</td>
                <td>{{ item.isAdmin }}</td>
                <td>{{ item.result }}</td>
            </tr>
        </table>
    </div>

    <!-- 分页器 -->
    <div class="page-bar">
        <ul>
            <li v-if="page>1">
                <a href="javascript:;" @click="page--,pageClick()">上一页</a>
            </li>
            <li v-if="page==1">
                <a href="javascript:;" class="banclick">上一页</a>
            </li>

            <li v-for="index in indexs" :key="index" :class="{ 'active': page == index}">
                <a href="javascript:;" @click="btnClick(index)">{{ index }}</a>
            </li>

            <li v-if="page!=all">
                <a href="javascript:;" @click="page++,pageClick()">下一页</a>
            </li>
            <li v-if="page == all">
                <a href="javascript:;" class="banclick">下一页</a>
            </li>

            <li><a href="javascript:;">共<i>{{all}}</i>页</a></li>
        </ul>
    </div>
</div>
</template>

<script>
export default {
    name: "allUser",
    data() {
        return {
            allUserList: [],
            page: 1,
            count: 3,
            all: 10, //总页数
        }
    },
    mounted() {
        this.getAllUsers()
    },
    methods: {

        //分页
        btnClick(data) {//页码点击事件
            if(data != this.page){
                this.page = data
            }
            //根据点击页数请求数据
            this.getAllUsers(this.page);
        },
        pageClick() {
            //根据点击页数请求数据
            this.getAllUsers(this.page);
        },

        // 所有的用户信息
        getAllUsers(index) {
            this.page = index || 1
            this.axios.get("/user/getAllUsers?page="+this.page+"&count="+this.count).then(res => {
                console.log(res.data);
                if(res.data.status === 200) {
                    this.allUserList = res.data.data
                    this.all = res.data.pageNum; //总页数
                }
            })
        }
    },
    computed: {
        //分页
        indexs() {
            var left = 1;
            var right = this.all;
            var ar = [];
            if(this.all>= 5){
                if(this.page > 3 && this.page < this.all-2){
                    left = this.page - 2
                    right = this.page + 2
                }else{
                    if(this.page<=3){
                        left = 1
                        right = 5
                    }else{
                        right = this.all
                        left = this.all -4
                    }
                }
            }
            while (left <= right){
                ar.push(left)
                left ++
            }
            return ar
        }
    },
    filters: {
        // 时间格式化
        timeTurn(data) {
            let d = new Date(Number(data.split("_")[2]))

            let y = d.getFullYear();
            let mm = (d.getMonth() + 1).toString().padStart(2, "0");
            let day = d.getDate().toString().padStart(2, "0");
            // 时:分:秒
            let h = d.getHours().toString().padStart(2, "0");
            let m = d.getMinutes().toString().padStart(2, "0");
            let s = d.getSeconds().toString().padStart(2, "0");

            return `${y}-${mm}-${day} ${h}:${m}:${s}`;
        },
        // 隐藏密码
        pwdTurnMd(data) {
            return data.replace(/^\w+$/, "******")
        }
    }
}
</script>

<style scoped>
.all-user {
    position: relative;
}
.user-table {
    overflow-y: hidden;
    overflow-x: scroll;
    height: 311px;
    white-space: nowrap;
}
table {
    width: 100%;
    border: 1px solid red;
    border-collapse: collapse;
    
}
table tr th,
table tr td {
    min-width: 40px;
    border: 1px solid blue;
    padding: 20px 10px;
    box-sizing: border-box;
}

/*分页*/
.page-bar {
    overflow: hidden;
    position: absolute;
    left: 0;
    right: 0;
    bottom: -100px;
    margin: 0 auto;
    /* white-space: nowrap; */
    font-size: 14px;
}
.page-bar ul {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}
.page-bar li{
    width: 64px;
    height: 36px;
    margin: 0 5px;
    padding: 0 3px;
    line-height: 36px;
    border: 1px solid #5D6062;
    color: #5D6062;
    cursor: pointer;
    box-sizing: border-box;
}
.page-bar li a {
    display: inline-block;
    width: 100%;
    height: 100%;
}
.page-bar li:hover{
    background-color: #ffa7a7;
}
.page-bar .banclick {
    cursor:not-allowed;
}
.page-bar .active {
    color: #fff;
    cursor: default;
    background-color: #E96463;
    border-color: #E96463;
}
.page-bar i{
    font-style:normal;
    color: #d44950;
    margin: 0px 4px;
    font-size: 12px;
}
</style>